<template>
  <div class="appTemplate">
    <Header :title="'网络案例-图片展厅'" :back="true"/>
    <main ref="threeView" class="main"></main>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import Header from '@/components/Header.vue';
import Footer from '@/components/Footer.vue';
import {onMounted, ref} from "vue";
// 导入判断WebGL工具
import WebGL from "@/utils/WebGL";
import {ThreeUtil} from "@/utils/ThreeUtil";
import { DemoInit } from "@/logic/gallery/Demo01/Init";

// 定义three场景显示区域
const threeView = ref();
const threeUtil = new ThreeUtil();
let page: DemoInit;

onMounted(() => {
  if (WebGL.isWebGLAvailable()) {
    page = new DemoInit(threeUtil, threeView.value);
    page.initData();
    animate();
  } else {
    const warning = WebGL.getWebGLErrorMessage();
    threeView.value.appendChild(warning)
  }
})

const animate = () => {
  requestAnimationFrame(animate);
  page.animateUpdate();
  threeUtil.renderer.render(threeUtil.scene , threeUtil.camera);
}


</script>

<style scoped>

</style>